<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<div>
		<simple-counter></simple-counter> 
		<simple-counter></simple-counter> 
		<simple-counter></simple-counter>
	</div> 
</div>
<script>
	/**
	 * 当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML
	 *  的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML
	 *   后才能获取模版内容。尤其像这些元素 <ul> ， <ol>， <table> ， 
	 *   <select> 限制了能被它包裹的元素，
	 *    <option> 只能出现在其它元素内部。
	 */
	var data = { counter: 0 }
	Vue.component('simple-counter', {
		template: '<button v-on:click="counter += 1">{{ counter }}</button>',
	 	// data 是一个函数，因此 Vue 不会警告， 
		// 但是我们为每一个组件返回了同一个对象引用 
		data: function () {
			return data
		}
	})
	new Vue({
		el: '#root' 
	})
</script>	
</body>
</html>